<!-- 头部导航 -->
<template>
    <view class="content-swiper-head">
        <view class="content-swiper-head-left">
            <uni-icons type="back" :color="props.colorStr" size="30" @click="goBack()"></uni-icons>
            <van-image
                v-if="props.isImg"
                round
                width="80rpx"
                height="80rpx"
                style="margin-right: 10rpx;"
                :src="props.userInfo ? props.userInfo.Avatar : ''"
            />
            <text>{{props.userInfo ? props.userInfo.ShowName : ''}}</text>
            <Ident :userInfo="props.userInfo"/>
        </view>
        <view class="content-swiper-head-right">
            <ActionSheetBox :actionsArr="state.actions" :currentItem="props.userInfo" ref="ActionSheetRef" />
            <slot name="attention"></slot>
            <uni-icons type="more-filled" :color="props.colorStr" size="30" @click="actionFn()"></uni-icons>
        </view>
    </view>
</template>
    
<script setup>
import { reactive, getCurrentInstance,ref, onMounted } from "vue"
import { getAuthorization, setAuthorization } from "@/utils/auth.js"
import Ident from "@/pages/home/components/ident/index.vue"

import { onLoad } from '@dcloudio/uni-app'
const state = reactive({
    show: false,
    value: '',
    actions: [
        { name: '不喜欢' },
        { name: '举报' },
    ],
})

const props = defineProps({
    colorStr:{
        type:String,
        default:"#333"
    },
    isImg:{
        type:Boolean,
        default:false
    },
    userInfo:{
        type:Object,
        default:()=>{}
    }
})

onLoad((options) => {

})

const goBack = () => {
    uni.navigateBack(-1)
}


const reviewFn = () => {
    state.show = true
}

let ActionSheetRef = ref()
const actionFn = () => {
    ActionSheetRef.value.actionSheetShow()
}

defineExpose({
    reviewFn
})

</script>
    
<style lang="scss" scoped>
.content-swiper-head {
    position: fixed;
    top: 0;
    width: calc(100vw - 60rpx);
    display: flex;
    justify-content: space-between;
    color: #fff;
    align-items: center;
    padding: 30rpx;
    background: #fff;
    z-index: 99;

    .content-swiper-head-left {
        display: flex;
        align-items: center;
    }



    .content-swiper-head-right {
        display: flex;
        align-items: center;
        .view-item-image-head-attention-cur {
            background: #fff;
            color: #fff;
        }
    }
}</style>
    